<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id='root'>
        <input type="text" placeholder="输入姓名" v-model="keyword">
        <button @click="sortType=1">年龄升序</button>
        <button @click="sortType=2">年龄降序</button>
        <button @click="sortType=0">原顺序</button>
        <ul v-for="(item,index) in list" :key="index">
            <li>
                <p>{{item.uname}}-{{item.age}}-{{item.sex}}</p>
            </li>
        </ul>
    </div>
    <script>
        Vue.config.productionTip = false
        let vm = new Vue({
            el: "#root",
            data: {
                keyword: "",
                sortType: 0, //1升序 2降序 0原顺序
                users: [{
                        uname: "张三",
                        age: 10,
                        sex: "女"
                    },
                    {
                        uname: "李四",
                        age: 20,
                        sex: "女"
                    },
                    {
                        uname: "王五",
                        age: 30,
                        sex: "女"
                    },
                    {
                        uname: "赵六",
                        age: 40,
                        sex: "女"
                    },
                ]
            },
            computed: {
                list() {
                    var arr = this.users.filter(item => {
                        return item.uname.indexOf(this.keyword) !== -1
                    })
                    // console.log(this);
                    if (this.sortType) {
                        // 1.升序 2.降序
                        arr.sort((a,b)=>{
                            return this.sortType == 1 ? a.age - b.age:b.age -a.age
                        })
                    }else{
                    //     // 直接赋值，this。list和this.users会用同一个地址
                    //     // 转成字符串，然后再回复到数组，this.list和this.users地址就不同了
                        this.list = JSON.parse(JSON.stringify(this.users))
                    }
                    return arr
                }
            }
        })
    </script>
</body>

</html>